<template>
  <el-container>
    <el-header class="auditor_header">
      车辆管理
    </el-header>
    <el-main>
      <div class="top-title1">
        <input v-model="truckLicense" placeholder="车牌号"/>
        <input v-model="truckWeight" placeholder="吨位"/>
        <button @click="searchFor">查询车辆信息</button>
        <button @click="searchAll">全部车辆信息</button>
      </div>
      <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%;height: 480px;">
        <el-table-column prop="id" label="序号"  />
        <el-table-column prop="truckLicense" label="车牌号" />
        <el-table-column prop="truckWeight" label="吨位" />
        <el-table-column prop="truckLength" label="车长" />
        <el-table-column prop="truckWidth" label="车宽" />
        <el-table-column prop="truckHeight" label="车高" />
        <el-table-column  label="操作"  prop="state">
          <template  v-slot:default="scope">
            <el-input
                autosize
                v-model="state[scope.row.id-1]"
                type="textarea"
                :placeholder="tableData[scope.row.id-1].currentCondition"
                @change="changeState(scope.row.id-1)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-main>

  <el-footer>
    <el-config-provider :locale="locale">
    <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"

    />
    </el-config-provider>
  </el-footer>
  </el-container>
</template>
<script>
import axios from "axios";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      locale:zhCn,
      truckLicense:'',
      truckWeight: '',
      total:10,
      currentPage:1,
      pageSize:5,
      state:[],
      apidata: [
        {
        id: 1,
        tonnage: "35",
        length: "15",
        vehicleNumber: "131323",
        width: "10",
        height: "2",
        state: "车辆近况良好"}
      ],
      tableData:[
      ]
    }
  },
  mounted() {
    let userjson=sessionStorage.getItem('user')
    let user=JSON.parse(userjson)
    axios({
      method: 'post',
      url: '/api/trucks/showTrucks',
      data: {
        idCard:user.idCard,
      },
    })
    .then((res)=>{
      // alert("查询中")
      this.tableData=res.data.data
      window.sessionStorage.setItem('tableData', JSON.stringify(this.tableData))
      for(var i=0;i<res.data.data.length;i++){
        this.state[i]=res.data.data[i].currentCondition
        this.tableData[i].id=i+1
      }
      this.total=res.data.data.length
    });
  },
methods:{
    testAPI:function (){
      // alert("查询中")
      ElMessage.warning('查询中')
      axios({
        method: 'post',
        url: 'http://127.0.0.1:4523/m1/1840267-0-default/trucks/showTrucks',
        data: {
          idCard:'11',
        },

      })
      .then((res)=>{
        // alert("查询中")
        ElMessage.warning('查询中')
        this.tableData=res.data.data
        window.sessionStorage.setItem('tableData', JSON.stringify(this.tableData))
        for(var i=0;i<res.data.data.length;i++){
          this.state[i]=res.data.data[i].state
          this.tableData[i].id=i+1
        }
        this.total=res.data.data.length
      });
    },
  searchFor:function (){
    let userjson=sessionStorage.getItem('user')
    let user=JSON.parse(userjson)
    axios({
      method: 'post',
      url: '/api/trucks/selectTrucks',
      data: {
        idCard:user.idCard
      },
      params: {
        truckLicense:this.truckLicense,
        truckWeight:this.truckWeight,
      },
    })
    .then((res)=>{
      // alert("查询中")
      ElMessage.warning('查询中')
      this.tableData=res.data.data
      for(var i=0;i<res.data.data.length;i++){
        this.state[i]=res.data.data[i].state
        this.tableData[i].id = i+1
      }
      this.total=res.data.data.length
    });
  },
  searchAll:function (){
    let userjson=sessionStorage.getItem('user')
    let user=JSON.parse(userjson)
    axios({
      method: 'post',
      url: '/api/trucks/showTrucks',
      data: {
        idCard:user.idCard,
      },
    })
    .then((res)=>{
      // alert("查询中")
      this.tableData=res.data.data
      window.sessionStorage.setItem('tableData', JSON.stringify(this.tableData))
      for(var i=0;i<res.data.data.length;i++){
        this.state[i]=res.data.data[i].currentCondition
        this.tableData[i].id=i+1
      }
      this.total=res.data.data.length
    });
  },
  //这是近况栏改变后触发函数，自动保存近况num是总data的第几条，a是车牌号
  changeState:function (num){
    axios({
      method: 'get',
      url: '/api/trucks/updateTruck',
       params: {
         truckLicense:this.tableData[num].truckLicense,
         currentCondition:this.state[num],
      },
    })
     .then((res)=>{
       this.informData=res.data.data.tableData
       this.total=res.data.data.tableData.length
     });
  }
}
}
</script>
<style scoped>
.auditor_header{
  height: 40px;
  text-align: left;
  line-height: 40px;
  font-size: 20px;
  font-weight: bolder;
  border-bottom: rgba(140, 147, 157, 0.38) 1px solid;
}
.top-title1{
  height: 66px;
  background-color: #ABA8A84C;
  border-bottom: rgba(140, 147, 157, 0.38) 1px solid;
  font-size: 36px;
  line-height: 66px;
}
.top-title1 input{
  margin-left: 50px;
  height: 40px;
  margin-right:100px;

}
.top-title1 button{
  background-color: rgb(0, 176, 252);
  border-radius: 10px;
  margin-left: 15%;
  height: 40px;
  width: 100px;
  border-style: none;
}

.el-container{
  height: 100%;
  width: 100%;
}
.el-footer{
  text-align: center;
  position: relative;
  bottom: 0px;
}
.el-pagination{
  justify-content: center !important;
}
</style>
